<template>
  <button class="btn" @click="increment">{{counter}}</button>
</template>

<script>
export default {
  name: 'counter',
  props: {
      bus: {
          type: Object,
          required: false,
          default: null
      }
  },
  data: function () {
    return {counter: 0}
  },
  methods:{
      increment: function () {
        this.counter++;
        this.$emit("increment",1);
        if(this.bus != null){
            this.bus.$emit('change',this.counter);
        }
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
